<template>
  <div class="contain">
    <div style="display: none">
      <CommentBox :userInfo="userInfo" :reply-info="replyInfo" @submit-box="submitBox"
                  :showCancle="showCancle"></CommentBox>

      <CommentList :comments="comments"></CommentList>
      <div style="color: aqua">
        <countTo :startVal='startVal' :endVal='endVal' :decimals='decimals' :duration='3000'></countTo>
      </div>
    </div>
    <HelloG2 msg="Welcome to Your Vue.js App"></HelloG2>
  </div>
</template>
<script>
import HelloG2 from '../components/HelloG2';
import CommentList from "../components/CommentList";
import CommentBox from "../components/CommentBox";
import countTo from 'vue-count-to';

// vuex中有mapState方法，相当于我们能够使用它的get,set方法
import {mapMutations} from 'vuex';

export default {
  data() {
    return {
      startVal: 0,
      endVal: 2020.33,
      decimals: 2,
      showCancle: false,
      submitting: false,
      value: '',
      userInfo: {
        uid: "uid000001",
        userName: "张三",
        avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"

      },
      replyInfo: {
        uid: "",
        blogUid: "uid000003",
        replyUserUid: "uid000004",
        replyUid: 0,
        avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
      },
      comments: [
        {
          uid: 'uid000',
          userName: "陌溪",
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content: '我是一级评论',
          reply: [
            {
              uid: 'uid001',
              userName: "陌溪",
              avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
              content: '我是二级评论',
              reply: [
                {
                  uid: 'uid002',
                  userName: "陌溪",
                  avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
                  content: '我是三级评论',
                  reply: []
                }
              ]
            }
          ]
        },
        {
          uid: 'uid004',
          userName: "陌溪",
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content: '我是一级评论',
          reply: []
        },
      ],
    };
  },
  watch: {},
  computed: {},
  components: {
    CommentList,
    CommentBox,
    countTo,
    HelloG2
  },
  mounted() {
    this.setCommentList(this.comments);
  },
  methods: {
    //拿到vuex中的写的两个方法
    ...mapMutations(['setCommentList', 'increment']),
    submitBox(e) {
      var comments = this.$store.state.app.commentList;
      e.uid = this.$store.state.app.id
      comments.push(e);

      this.$store.commit("setCommentList", comments);
      this.$store.commit("increment");
    }
  },
};
</script>
<style>
.contain {
  width: 600px;
  margin: 0 auto;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
